<template>
  <div class="butt-list-sty">
    <div
      v-for="(item, index) in buttonselectlist"
      :key="index"
      class="basebut2"
      :class="index === itemtypeactive ? 'basebut1' : ''"
      @click="itemtypeactive = index"
    >{{ item.itemTypeName }}</div>
  </div>
</template>
<script>
// import Process from "@/api/agricultural-work-management/agricultural-task-processing"
export default {
  data() {
    return {
      itemtypeactive: 0,
      buttonselectlist: [
        { itemTypeId: 0, itemTypeName: "待处理" },
        { itemTypeId: 1, itemTypeName: "已逾期" },
        { itemTypeId: 2, itemTypeName: "已完成" },
        { itemTypeId: 3, itemTypeName: "已作废" }
      ]
    };
  },
  watch: {
    itemtypeactive(newvalue) {
      this.setfarmtypeid(newvalue);
    }
  },
  mounted() {
    this.setfarmtypeid(0);
    this.ProcessList();
  },
  methods: {
    ProcessList() {
    },
    setfarmtypeid(i) {
      this.$emit("topitemtype", this.buttonselectlist[i]["itemTypeId"]);
    }
  }
};
</script>
<style lang="scss" scoped>
.butt-list-sty {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.basebut2 {
  width: 130px;
  height: 36px;
  line-height: 36px;
  border-radius: 20px;
  margin-right: 30px;
  font-size: 16px;
  text-align: center;
  background-color: rgba(22, 104, 133);
  border: #6ecae3 1px solid;
  cursor: pointer;
}
.basebut1 {
  background-image: -ms-linear-gradient(
    bottom,
    rgb(35, 181, 235),
    rgb(28, 148, 192),
    rgb(35, 181, 235)
  );
  background-image: -moz-linear-gradient(
    bottom,
    rgb(35, 181, 235),
    rgb(28, 148, 192),
    rgb(35, 181, 235)
  );
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(35, 181, 235),
    rgb(28, 148, 192),
    rgb(35, 181, 235)
  );
  background-image: -o-linear-gradient(
    bottom,
    rgb(35, 181, 235),
    rgb(28, 148, 192),
    rgb(35, 181, 235)
  );
  background-image: linear-gradient(
    to bottom,
    rgb(35, 181, 235),
    rgb(28, 148, 192),
    rgb(35, 181, 235)
  );
  border: #6ecae3 1px solid;
}
</style>
